<template>
  <div id="map" class="map-container"></div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import "ol/ol.css";
export default {
  mounted() {
    console.log(632746782734278);
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new XYZ({
            tileUrlFunction(tile) {
              console.log(tile);
              return `./images/${tile[4]}/tile-${tile[1]}_${tile[2]}.jpg`;
            },
            // url: "/tiles/{z}/tile-{x}_{-y}.png",
            maxZoom: 10,
            minZoom: 4,
          }),
        }),
      ],
      view: new View({
        center: fromLonLat([-180, 90]),
        zoom: 6,
      }),
    });
  },
};
</script>

<style>
.map-container {
  height: 100%;
}
</style>